<template>
	<page-meta :page-style="'overflow:' + (show ? 'hidden' : 'visible')"></page-meta>

	<view>
		<view class="top" :style="`padding-top: ${$Height() - 30}px;`">
			<view class="top_box">
				<image class="top_box_left" src="/static/30.png" mode="" @click="$fh"></image>
				<view class="top_box_title">我的收藏</view>
				<view class="top_box_right" :style="`width: ${$Width() + 15}px;`"></view>
			</view>

			<view class="sift">
				<view
					class="sift_nr"
					:class="sift_id == 1 || (!sift_id && sift_1_id) ? 'sift_nr_xz' : ''"
					@click="siftclick(1)">
					<view class="sift_nr_title">
						推荐排序
						<image class="sift_nr_img" src="/static/8.png" mode=""></image>
						<view class="sift_nr_zw"></view>
					</view>
				</view>
				<view
					class="sift_nr"
					:class="sift_id == 2 || (!sift_id && (tall_price || low_price)) ? 'sift_nr_xz' : ''"
					@click="siftclick(2)">
					<view class="sift_nr_title">
						价格范围
						<image class="sift_nr_img" src="/static/8.png" mode=""></image>
						<view class="sift_nr_zw"></view>
					</view>
				</view>
				<view
					class="sift_nr"
					:class="sift_id == 3 || (!sift_id && cityStore.name) ? 'sift_nr_xz' : ''"
					@click="siftclick(3)">
					<view class="sift_nr_title">
						区域位置
						<image class="sift_nr_img" src="/static/8.png" mode=""></image>
						<view class="sift_nr_zw"></view>
					</view>
				</view>
				<view
					class="sift_nr"
					:class="
						sift_id == 4 ||
						(!sift_id &&
							(sift_box_4_list_1 ||
								sift_box_4_list_2 ||
								sift_box_4_list_3 ||
								sift_box_4_list_4 ||
								sift_box_4_list_5.length > 1))
							? 'sift_nr_xz'
							: ''
					"
					@click="siftclick(4)">
					<view class="sift_nr_title">
						筛选条件
						<image class="sift_nr_img" src="/static/8.png" mode=""></image>
						<view class="sift_nr_zw"></view>
					</view>
				</view>
			</view>

			<view class="sift_box sift_box_1" v-if="sift_id == 1">
				<view class="sift_box_1_nr" :class="sift_1_id == 1 ? 'sift_box_1_xz' : ''" @click="sift_1_click(1)">
					距离优先
				</view>
				<view class="sift_box_1_nr" :class="sift_1_id == 2 ? 'sift_box_1_xz' : ''" @click="sift_1_click(2)">
					好评优先
				</view>
				<view class="sift_box_1_nr" :class="sift_1_id == 3 ? 'sift_box_1_xz' : ''" @click="sift_1_click(3)">
					低价优先
				</view>
				<view class="sift_box_1_nr" :class="sift_1_id == 4 ? 'sift_box_1_xz' : ''" @click="sift_1_click(4)">
					高价优先
				</view>
				<view class="sift_box_1_nr" :class="sift_1_id == 5 ? 'sift_box_1_xz' : ''" @click="sift_1_click(5)">
					星级优先
				</view>
			</view>

			<view class="sift_box sift_box_2" v-if="sift_id == 2">
				<view class="sift_box_2_title">价格区间</view>
				<view class="sift_box_2_box">
					<view class="sift_box_2_box_inp">
						<input class="sift_box_2_box_inp_nr" type="text" placeholder="输入最低价" v-model="tall_price" />
						元
					</view>
					<view class="sift_box_2_box_text">-</view>
					<view class="sift_box_2_box_inp">
						<input class="sift_box_2_box_inp_nr" type="text" placeholder="输入最高价" v-model="low_price" />
						元
					</view>
				</view>

				<view class="sift_box_2_title">价格区间</view>

				<view class="sift_box_2_list">
					<view
						class="sift_box_2_list_nr"
						:class="low_price && low_price <= 150 ? 'sift_box_2_list_nr_xz' : ''"
						@click="box_2_listclick(1)">
						￥150以下
					</view>
					<view
						class="sift_box_2_list_nr"
						@click="box_2_listclick(2)"
						:class="tall_price && low_price && tall_price >= 150 && low_price <= 200 ? 'sift_box_2_list_nr_xz' : ''">
						￥150-￥200
					</view>
					<view
						class="sift_box_2_list_nr"
						:class="tall_price && low_price && tall_price >= 200 && low_price <= 300 ? 'sift_box_2_list_nr_xz' : ''"
						@click="box_2_listclick(3)">
						￥200-￥300
					</view>
					<view
						class="sift_box_2_list_nr"
						:class="tall_price && low_price && tall_price >= 300 && low_price <= 400 ? 'sift_box_2_list_nr_xz' : ''"
						@click="box_2_listclick(4)">
						￥300-￥400
					</view>
					<view
						class="sift_box_2_list_nr"
						:class="tall_price && low_price && tall_price >= 400 && low_price <= 600 ? 'sift_box_2_list_nr_xz' : ''"
						@click="box_2_listclick(5)">
						￥400-￥600
					</view>
					<view
						class="sift_box_2_list_nr"
						:class="tall_price && tall_price >= 600 ? 'sift_box_2_list_nr_xz' : ''"
						@click="box_2_listclick(6)">
						￥600以上
					</view>
				</view>

				<view class="sift_box_2_btn">
					<view class="sift_box_2_btn_nr btn1" @click="low_tall_price(0)">清空</view>
					<view class="sift_box_2_btn_nr btn2" @click="low_tall_price(1)">确定</view>
				</view>
			</view>

			<view class="sift_box sift_box_3" v-if="sift_id == 3">
				<view class="sift_box_3_title">行政区域</view>
				<view class="sift_box_3_list">
					<view
						class="sift_box_3_list_nr"
						:class="cityStore.name == item.name ? 'sift_box_3_xz' : ''"
						@click="sift_3_click(item.name)"
						v-for="(item, index) in area"
						:key="index">
						{{ item.name }}
					</view>
				</view>
			</view>

			<view class="sift_box sift_box_4" v-if="sift_id == 4">
				<view class="sift_box_box">
					<view class="sift_box_4_title">出租类型</view>
					<view class="sift_box_4_list">
						<view
							class="sift_box_4_list_nr"
							:class="sift_box_4_list_1 == 1 ? 'sift_box_4_list_nr_xz' : ''"
							@click="sift_box_4_list_1clcik(1)">
							整套出租
						</view>
						<view
							class="sift_box_4_list_nr"
							:class="sift_box_4_list_1 == 2 ? 'sift_box_4_list_nr_xz' : ''"
							@click="sift_box_4_list_1clcik(2)">
							单间出租
						</view>
						<view
							class="sift_box_4_list_nr"
							:class="sift_box_4_list_1 == 3 ? 'sift_box_4_list_nr_xz' : ''"
							@click="sift_box_4_list_1clcik(3)">
							合住房间
						</view>
					</view>

					<view class="sift_box_4_title">房源户型</view>
					<view class="sift_box_4_list">
						<view
							class="sift_box_4_list_nr"
							:class="sift_box_4_list_2 == 1 ? 'sift_box_4_list_nr_xz' : ''"
							@click="sift_box_4_list_2clcik(1)">
							一室
						</view>
						<view
							class="sift_box_4_list_nr"
							:class="sift_box_4_list_2 == 2 ? 'sift_box_4_list_nr_xz' : ''"
							@click="sift_box_4_list_2clcik(2)">
							两室
						</view>
						<view
							class="sift_box_4_list_nr"
							:class="sift_box_4_list_2 == 3 ? 'sift_box_4_list_nr_xz' : ''"
							@click="sift_box_4_list_2clcik(3)">
							三室
						</view>
						<view
							class="sift_box_4_list_nr"
							:class="sift_box_4_list_2 == 4 ? 'sift_box_4_list_nr_xz' : ''"
							@click="sift_box_4_list_2clcik(4)">
							四室及以上
						</view>
					</view>

					<view class="sift_box_4_box" @click="is_hidden_1 = !is_hidden_1">
						<view class="sift_box_4_box_left">宜居人数</view>
						<image class="sift_box_4_box_right" src="/static/8.png" mode=""></image>
					</view>
					<view class="sift_box_4_list" :class="is_hidden_1 ? 'hidden_80' : ''">
						<view
							class="sift_box_4_list_nr"
							:class="sift_box_4_list_3 == item ? 'sift_box_4_list_nr_xz' : ''"
							v-for="(item, index) in 10"
							:key="index"
							@click="sift_box_4_list_3clcik(item)">
							{{ item }}人
						</view>
					</view>

					<view class="sift_box_4_box" @click="is_hidden_2 = !is_hidden_2">
						<view class="sift_box_4_box_left">床铺数量</view>
						<image class="sift_box_4_box_right" src="/static/8.png" mode=""></image>
					</view>
					<view class="sift_box_4_list" :class="is_hidden_2 ? 'hidden_80' : ''">
						<view
							class="sift_box_4_list_nr"
							:class="sift_box_4_list_4 == item ? 'sift_box_4_list_nr_xz' : ''"
							v-for="(item, index) in 10"
							:key="index"
							@click="sift_box_4_list_4clcik(item)">
							{{ item }}床
						</view>
					</view>

					<view class="sift_box_4_title">服务设施</view>
					<view class="sift_box_4_list">
						<view
							class="sift_box_4_list_nr"
							:class="isshow(item.title) ? 'sift_box_4_list_nr_xz' : ''"
							@click="sift_box_4_list_5clcik(item.title)"
							v-for="(item, index) in sheshi"
							:key="index">
							{{ item.title }}
						</view>
					</view>
				</view>
				<view class="sift_box_4_btn">
					<view class="sift_box_4_btn_nr btn1" @click="sift_box_4click(0)">清空</view>
					<view class="sift_box_4_btn_nr btn2" @click="sift_box_4click(1)">确定</view>
				</view>
			</view>

			<view class="sift_zw" v-if="show && sift_id != 0" @click="siftclick(0)"></view>
		</view>

		<view class="box">
			<view class="list" v-for="(item, index) in list" :key="index" @click="to_condo_detail(item.fyid)">
				<view class="list_top">
					<image class="list_top_img" :src="item.photo" mode=""></image>
					<view class="list_top_zw_top">
						<image class="img1" src="/static/53.png" mode=""></image>
						<image class="img2" src="/static/52.png" mode=""></image>
					</view>
					<view class="list_top_zw_btn">
						<view class="btn1">浏览：{{ item.liulan }}人</view>
						<view class="btn2">
							<image class="btn2_img" src="/static/5.png" mode=""></image>
							<view class="btn2_text">{{ item.xingji }}</view>
						</view>
					</view>
				</view>

				<view class="list_box">
					<view class="list_box_title">{{ item.title }}</view>
					<view class="list_box_text">
						<view class="list_box_text_nr">
							{{ item.czleixing }}·{{ item.shi }}室{{ item.ting }}厅·{{ item.shuliang }}床·宜住{{ item.renshu }}人
						</view>
						<view class="list_box_text_nr">
							<image class="list_box_text_nr_img" src="/static/51.png" mode=""></image>
							{{ item.juli }}km
						</view>
					</view>
					<view class="list_box_bq">
						<view class="list_box_bq_nr" v-for="(ttem, idx) in item.shebeis" :key="idx">{{ ttem }}</view>
					</view>
					<view class="list_box_btn">
						<view class="list_box_btn_left">
							<view>
								<span class="span1">¥</span>
								<span class="span2">{{ item.price }}</span>
								<span class="span3">/晚</span>
							</view>
							<span class="span5" v-if="item.zjitian">连住特惠</span>
						</view>
						<view class="list_box_btn_right">
							<image class="list_box_btn_right_img" :src="item.fdphoto" mode=""></image>
							{{ item.fdname }}
						</view>
					</view>
				</view>
			</view>

			<view class="con" v-if="list != null && list.length < 1">
				<view class="no_list">
					<image class="no_list_img" src="/static/no_list.png" mode=""></image>
				</view>
			</view>
		</view>

		<uni-popup
			ref="Picker_popup"
			type="bottom"
			border-radius="10px 10px 0 0"
			background-color="#fff"
			:mask-click="false"
			@change="popup_change">
			<view class="picker_popup_box">
				<view class="picker_popup_box_top">
					<image class="picker_popup_box_top_zw" src="/static/50.png" mode="" @click="ed(false)"></image>
					<view class="picker_popup_box_top_title">选择入住离开日期</view>
				</view>
				<view class="picker_popup_box_nr">
					<date-picker
						:show="showPicker"
						type="range"
						:value="cityStore.formatted"
						:show-tips="true"
						:begin-text="'入住'"
						:end-text="'离店'"
						:show-seconds="true"
						@confirm="ed"
						@cancel="ed" />
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import DatePicker from '@/components/datepicker/datepicker.vue'
	import { useCityStore } from '@/utils/cityStore.js'
	const cityStore = useCityStore()
	const http = inject('$http')
	let list = ref([])
	let area = ref([1])
	let sheshi = ref([])
	let show = ref(false)
	let sift_id = ref(0)
	let sift_1_id = ref(0)
	let tall_price = ref('')
	let low_price = ref('')
	let sift_box_4_list_1 = ref(0)
	let sift_box_4_list_2 = ref(0)
	let sift_box_4_list_3 = ref(0)
	let sift_box_4_list_4 = ref(0)
	let sift_box_4_list_5 = ref([])

	let is_hidden_1 = ref(true)
	let is_hidden_2 = ref(true)

	// 响应式变量定义
	const showPicker = ref(false)
	let Picker_popup = ref(null)
	// 显示日期选择器
	const onShowDatePicker = (type) => {
		console.log('cityStore', cityStore)
		showPicker.value = true
		Picker_popup.value.open()
	}

	// 处理选择结果
	const ed = (result) => {
		Picker_popup.value.close()
		showPicker.value = false
		console.log('result', result)
		// if (result) {
		// }
	}
	const popup_change = (e) => {
		console.log(e.show)
		show.value = e.show
	}

	const siftclick = (id) => {
		if (id == 0) {
			if (sift_id.value != 2 && sift_id.value != 4) {
				sift_id.value = 0
				show.value = false
			}
		} else {
			sift_id.value = id
			show.value = true
		}
	}

	const sift_1_click = (val) => {
		sift_1_id.value = val
		sift_id.value = 0
		show.value = false
		indexlist()
	}

	const box_2_listclick = (id) => {
		switch (id) {
			case 1:
				tall_price.value = ''
				low_price.value = 150
				break
			case 2:
				tall_price.value = 150
				low_price.value = 200
				break
			case 3:
				tall_price.value = 200
				low_price.value = 300
				break
			case 4:
				tall_price.value = 300
				low_price.value = 400
				break
			case 5:
				tall_price.value = 400
				low_price.value = 600
				break
			case 6:
				tall_price.value = 600
				low_price.value = ''
				break
			default:
				break
		}
	}

	const low_tall_price = (value) => {
		if (value == 0) {
			tall_price.value = ''
			low_price.value = ''
		}
		sift_id.value = 0
		show.value = false

		indexlist()
	}

	const sift_3_click = (val) => {
		cityStore.name = val
		sift_id.value = 0
		show.value = false

		indexlist()
	}

	const sift_box_4_list_1clcik = (val) => {
		sift_box_4_list_1.value = val
	}
	const sift_box_4_list_2clcik = (val) => {
		sift_box_4_list_2.value = val
	}
	const sift_box_4_list_3clcik = (val) => {
		sift_box_4_list_3.value = val
	}
	const sift_box_4_list_4clcik = (val) => {
		sift_box_4_list_4.value = val
	}

	const sift_box_4_list_5clcik = (val) => {
		sift_box_4_list_5.value.push(val)
	}
	const isshow = (id) => {
		return sift_box_4_list_5.value.includes(id)
	}

	const sift_box_4click = (value) => {
		if (value == 0) {
			sift_box_4_list_1.value = ''
			sift_box_4_list_2.value = ''
			sift_box_4_list_3.value = ''
			sift_box_4_list_4.value = ''
			sift_box_4_list_5.value = ''
		}
		sift_id.value = 0
		show.value = false

		indexlist()
	}

	const indexlist = async () => {
		let data = {
			lat: cityStore.localtion.latitude,
			lng: cityStore.localtion.longitude,
			field: '',
			order: '',
			area: cityStore.name,
			czleixing: sift_box_4_list_1.value,
			huxing: sift_box_4_list_2.value,
			renshu: sift_box_4_list_3.value,
			shuliang: sift_box_4_list_4.value,
			sheshi: '',
			price: ''
		}
		switch (sift_1_id.value) {
			case 1:
				data.field = 'juli'
				data.order = 'asc'
				break
			case 2:
				data.field = 'pingfen'
				data.order = 'desc '
				break
			case 3:
				data.field = 'price'
				data.order = 'asc'
				break
			case 4:
				data.field = 'price'
				data.order = 'desc'
				break
			case 5:
				data.field = 'xingji'
				data.order = 'desc'
				break
			default:
				data.field = 'id'
				data.order = 'desc'
				break
		}

		await http.post('/srapi/wode/wdcollect', data).then((res) => {
			console.log('返回值', res.data)
			list.value = res.data
		})
	}

	const is_date = (value) => {
		if (!value) return ''
		return value.replace('月', '.').replace('日', '')
	}
	onShow(async () => {
		console.log('页面刷新')
		await indexlist()
	})
	onLoad(async (option) => {
		console.log('接收传参:', option)

		uni.showLoading({})
		await cityStore.init()
		uni.hideLoading()
		await http.post('/srapi/home/ms').then((res) => {
			console.log('筛选数据', res)
			area.value = res.area
			sheshi.value = res.sheshi
		})
	})

	const to_condo_detail = (id) => {
		uni.navigateTo({
			url: '/pages_A/condo_detail/condo_detail?id=' + id
		})
	}
</script>

<style lang="less" scoped>
	.top {
		position: sticky;
		left: 0;
		top: 0;
		z-index: 9;
		width: 750rpx;
		box-sizing: border-box;
		background: linear-gradient(0deg, #f4f5f9 0%, #c0e6fc 30%);
		padding: 30rpx;
		.top_box {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 10rpx;
			margin-bottom: 30rpx;
			.top_box_left {
				position: relative;
				z-index: 2;
				width: 17rpx;
				height: 30rpx;
				padding: 15rpx 30rpx 15rpx 0;
			}

			.top_box_title {
				position: absolute;
				z-index: 1;
				width: 750rpx;
				left: -30rpx;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #000000;
			}
		}

		.search {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.search_left {
				flex: 1;
				height: 24rpx;
				background: #f5f6fa;
				border-radius: 12rpx;
				padding: 30rpx;
				margin-right: 10rpx;
				display: flex;
				align-items: center;
				.search_left_nr {
					font-size: 24rpx;
					font-weight: 700;
					color: #383838;

					padding-right: 25rpx;
					border-right: 1px solid #c9c9c9;
				}
				.search_left_inp {
					padding-left: 25rpx;
					font-size: 24rpx;
					font-weight: 500;
					text-align: left;
					color: #787878;
				}
			}
			.search_right {
				padding: 18rpx 25rpx;
				height: 44rpx;
				background: #f5f6fa;
				border-radius: 12rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				.search_right_nr {
					font-size: 20rpx;
					font-weight: 500;
					color: #010101;
					.span {
						color: #787878;
					}
				}
			}
		}

		.sift {
			padding: 20rpx 25rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.sift_nr {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				position: relative;
				.sift_nr_title {
					font-size: 24rpx;
					font-weight: 500;
					color: #000000;
				}
				.sift_nr_img {
					width: 15rpx;
					height: 15rpx;
				}

				.sift_nr_zw {
					display: none;
					position: absolute;
					bottom: -18rpx;
					width: 100rpx;
					height: 4rpx;
					background: #2266f9;
					border-radius: 2rpx;
					z-index: 9;
				}
			}
			.sift_nr_xz {
				.sift_nr_title {
					color: #2266f9;
				}
				.sift_nr_zw {
					display: block;
				}
			}
		}

		.sift_box {
			position: absolute;
			left: 0;
			margin-top: 15rpx;
			width: 750rpx;
			background: #ffffff;
			border-radius: 24rpx;
			z-index: 5;
			box-sizing: border-box;
		}

		.sift_box_box {
			max-height: 900rpx;
			overflow-y: auto;
		}

		.sift_box_1 {
			padding: 0 30rpx;
			.sift_box_1_nr {
				padding: 30rpx 0;
				font-size: 28rpx;
				font-weight: 500;
				color: #000000;
				border-bottom: 1px solid #f1f1f1;
			}
			.sift_box_1_xz {
				font-weight: 700;
				color: #2367fa;
			}
		}

		.sift_box_2 {
			padding: 30rpx;
			.sift_box_2_title {
				font-size: 28rpx;
				font-weight: 700;
				color: #000000;
				margin-bottom: 30rpx;
			}

			.sift_box_2_box {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 60rpx;
				.sift_box_2_box_inp {
					display: flex;
					align-items: center;
					flex: 1;
					background: #f6f6f6;
					border: 1rpx solid #e3e5ed;
					border-radius: 43rpx;
					padding: 15rpx 30rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #000000;
					.sift_box_2_box_inp_nr {
						flex: 1;
					}
				}
				.sift_box_2_box_text {
					font-size: 32rpx;
					font-weight: 700;
					color: #000000;
					margin: 0 11rpx;
				}
			}
			.sift_box_2_list {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				grid-gap: 20rpx;
				margin-bottom: 60rpx;
				.sift_box_2_list_nr {
					width: 216rpx;
					height: 64rpx;
					background: #f4f5f9;
					border-radius: 32rpx;

					font-size: 24rpx;
					font-weight: 500;
					text-align: center;
					color: #000000;
					line-height: 64rpx;
				}
				.sift_box_2_list_nr_xz {
					background: #2266f9;
					color: #ffffff;
				}
			}

			.sift_box_2_btn {
				padding-top: 30rpx;
				background: #ffffff;
				border-top: 1px solid rgba(0, 0, 0, 0.12);
				display: flex;
				justify-content: space-between;
				align-items: center;
				.sift_box_2_btn_nr {
					width: 335rpx;
					height: 78rpx;
					border-radius: 41rpx;
					font-size: 28rpx;
					font-weight: 700;
					text-align: center;
					line-height: 80rpx;
				}
				.btn1 {
					background: #ffffff;
					border: 2rpx solid #787878;
					color: #787878;
				}
				.btn2 {
					background: #4b83fe;
					color: #fefefe;
					border: 2rpx solid #4b83fe;
				}
			}
		}

		.sift_box_3 {
			padding: 30rpx;
			.sift_box_3_title {
				font-size: 28rpx;
				font-weight: 700;
				color: #000000;
				margin-bottom: 30rpx;
			}

			.sift_box_3_list {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				grid-gap: 20rpx;
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(min-content, max-content));
				gap: 12px; /* 间距相等 */
				justify-content: start; /* 左对齐 */
				margin-bottom: 60rpx;
				.sift_box_3_list_nr {
					background: #f4f5f9;
					border-radius: 32rpx;
					font-size: 24rpx;
					font-weight: 500;
					text-align: center;
					color: #000000;
					line-height: 64rpx;
				}
				.sift_box_3_xz {
					background: #2266f9;
					color: #ffffff;
				}
			}
		}

		.sift_box_4 {
			padding: 30rpx;

			.sift_box_4_box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.sift_box_4_box_left {
					font-size: 28rpx;
					font-weight: 700;
					color: #000000;
					margin-bottom: 30rpx;
				}
				.sift_box_4_box_right {
					width: 14rpx;
					height: 10rpx;
				}
			}
			.sift_box_4_title {
				font-size: 28rpx;
				font-weight: 700;
				color: #000000;
				margin-bottom: 30rpx;
			}
			.sift_box_4_list {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(120rpx, 1fr));
				gap: 12px; /* 间距相等 */
				margin-bottom: 60rpx;
				.sift_box_4_list_nr {
					background: #f4f5f9;
					border-radius: 32rpx;
					font-size: 24rpx;
					font-weight: 500;
					text-align: center;
					color: #000000;
					line-height: 64rpx;
				}
				.sift_box_4_list_nr_xz {
					background: #2266f9;
					color: #ffffff;
				}
			}

			.sift_box_4_btn {
				padding-top: 30rpx;
				background: #ffffff;
				border-top: 1px solid rgba(0, 0, 0, 0.12);
				display: flex;
				justify-content: space-between;
				align-items: center;
				.sift_box_4_btn_nr {
					width: 335rpx;
					height: 78rpx;
					border-radius: 41rpx;
					font-size: 28rpx;
					font-weight: 700;
					text-align: center;
					line-height: 80rpx;
				}
				.btn1 {
					background: #ffffff;
					border: 2rpx solid #787878;
					color: #787878;
				}
				.btn2 {
					background: #4b83fe;
					color: #fefefe;
					border: 2rpx solid #4b83fe;
				}
			}
		}

		.sift_zw {
			position: absolute;
			left: 0;
			bottom: -100vh;
			width: 750rpx;
			height: 100vh;
			background-color: rgba(000, 000, 000, 0.5);
		}
	}

	.hidden_80 {
		height: 80rpx;
		overflow: hidden;
	}
	.box {
		padding: 0 30rpx 30rpx;
	}
	.list {
		width: 690rpx;
		border-radius: 12rpx;
		margin-bottom: 30rpx;
		.list_top {
			width: 690rpx;
			height: 460rpx;
			position: relative;
			.list_top_img {
				width: 690rpx;
				height: 460rpx;
			}
			.list_top_zw_top {
				width: 690rpx;
				box-sizing: border-box;
				position: absolute;
				left: 0;
				top: 0;
				padding: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.img1 {
					width: 135rpx;
					height: 40rpx;
				}
				.img2 {
					width: 40rpx;
					height: 38rpx;
				}
			}
			.list_top_zw_btn {
				width: 690rpx;
				box-sizing: border-box;
				position: absolute;
				left: 0;
				bottom: 0;
				padding: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.btn1 {
					padding: 8rpx 15rpx;
					background: rgba(0, 0, 0, 0.6);
					border-radius: 17rpx;
					font-size: 20rpx;
					font-weight: 500;
					color: #ffffff;
				}
				.btn2 {
					width: 106rpx;
					position: relative;
					.btn2_img {
						width: 106rpx;
						height: 34rpx;
						border-radius: 17rpx;
						position: absolute;
						z-index: 1;
					}
					.btn2_text {
						font-size: 24rpx;
						font-weight: 500;
						text-align: left;
						color: #ffffff;
						position: relative;
						z-index: 2;
						padding-left: 20rpx;
					}
				}
			}
		}
		.list_box {
			background: #ffffff;
			border-radius: 0 0 12rpx 12rpx;
			padding: 30rpx;
			.list_box_title {
				font-size: 28rpx;
				font-weight: 700;
				color: #000000;
				margin-bottom: 20rpx;
			}
			.list_box_text {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;
				.list_box_text_nr {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-weight: 500;
					color: #787878;
					.list_box_text_nr_img {
						width: 21rpx;
						height: 24rpx;
						margin-right: 10rpx;
					}
				}
			}

			.list_box_bq {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-bottom: 24rpx;
				.list_box_bq_nr {
					background: #ffffff;
					border: 1rpx solid #b6b6b6;
					border-radius: 6rpx;
					font-size: 20rpx;
					font-weight: 500;
					color: #656565;
					padding: 10rpx;
					margin-right: 10rpx;
				}
			}

			.list_box_btn {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.list_box_btn_left {
					display: flex;
					align-items: flex-end;
					.span1 {
						font-size: 24rpx;
						font-weight: 500;
						color: #e93424;
					}
					.span2 {
						font-size: 36rpx;
						font-weight: 700;
						color: #e93424;
					}
					.span3 {
						font-size: 20rpx;
						font-weight: 700;
						color: #e93424;
					}
					.span4 {
						font-size: 24rpx;
						font-weight: 500;
						text-decoration: line-through;
						color: #787878;
						margin-left: 10rpx;
					}
					.span5 {
						background: #ffffff;
						border: 1rpx solid #e93424;
						border-radius: 6rpx;
						padding: 10rpx;
						font-size: 20rpx;
						font-weight: 500;
						color: #e93424;
						margin-left: 10rpx;
					}
				}
				.list_box_btn_right {
					display: flex;
					align-items: center;
					font-size: 20rpx;
					font-weight: 500;
					color: #000000;
					.list_box_btn_right_img {
						border-radius: 50%;
						width: 38rpx;
						height: 38rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
	//
</style>
